<!DOCTYPE html>
<html>
<head>
    <title>角色列表</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <!-- 所有的 css 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">

    <!-- 所有的 js 资源 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
    <script src="../../static/kj/laydate/laydate.js"></script>
    <script src="../../static/sa.js"></script>
    <script src="../../sa-resources/country-level2-data.js"></script>


</head>
<body>

<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div id="vue-box" style="display: none;" :style="'display: block;'">

    <div class="c-panel" style="width: 23%;float: left">
        <div class="c-title">角色操作</div>
        <div class="c-item" style="min-width: 0px;">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加角色</el-button>
        </div>
        <br/>
        </el-form>
    </div>
    <div class="c-panel" style="width: 66%;float: right">
        <div class="c-title">用户操作</div>
        <div class="c-item" style="min-width: 0px;">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="uhandleAdd">添加用户</el-button>
        </div>
        <br/>
        </el-form>
    </div>

    <div class="c-panel" style="width: 66%;float: right">
        <div class="c-title">用户列表</div>
        <el-table class="data-table" :data="alluserlist" border>
            <el-table-column label="员工编号" prop="job_id" sortable></el-table-column>
            <el-table-column label="员工名称" prop="ename" sortable></el-table-column>
            <el-table-column label="用户名" prop="username" sortable></el-table-column>
            <el-table-column label="密码" prop="password" sortable></el-table-column>
            <el-table-column label="微信" prop="wechat" sortable></el-table-column>
            <el-table-column label="用户角色" prop="role_id" sortable></el-table-column>
            <el-table-column label="用户角色" prop="role" sortable></el-table-column>
            <el-table-column label="用户状态" prop="state" sortable></el-table-column>
            <el-table-column  label="操作">
            <template slot-scope="scope">
                <el-button type="primary" class="c-button" icon="el-icon-edit" @click="uhandleEdit(scope.row)">修改
                </el-button>
            </template>
            </el-table-column>
        </el-table>

        <!-- 编辑 -->
        <el-dialog title="用户编辑" :visible.sync="ueditVisible" width="30%">
            <el-form name="uform" id="uform" ref="uform" :model="uform" label-width="100px">
                <el-form-item label="员工编号">
                    {{uform.job_id}}
                </el-form-item>
                <el-form-item label="员工名称">
                    {{uform.ename}}
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input id="eusername" name="eusername" v-model="uform.username" maxlength="30"
                              show-word-limit/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input id="epassword" name="epassword" v-model="uform.password" maxlength="30"
                              show-word-limit/>
                </el-form-item>
                <el-form-item label="微信">
                    <el-input id="ewechat" name="ewechat" v-model="uform.wechat" maxlength="30"
                              show-word-limit/>
                </el-form-item>
                <el-form-item label="角色编号">
                    <el-input id="erole_id" name="erole_id" v-model="uform.role_id" maxlength="30"
                              show-word-limit/>
                </el-form-item>
                <el-form-item label="用户状态">
                    <el-input id="estate" name="estate" v-model="uform.state" maxlength="30"
                              show-word-limit/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="ueditVisible = false">取 消</el-button>
            <el-button type="primary" @click="usaveEdit()">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 添加 -->
        <el-dialog title="用户添加" :visible.sync="uaddVisible" width="30%">
            <el-form name="utemp" id="utemp" ref="utemp" :model="utemp" label-width="100px">
                <el-form-item label="员工编号">
                    <el-input id="ajob_id" name="ajob_id" v-model="utemp.job_id" maxlength="30"
                              placeholder="请输入员工编号" show-word-limit/>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input id="ausername" name="ausername" v-model="utemp.username" maxlength="30"
                              placeholder="请输入用户名" show-word-limit/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input id="apassword" name="apassword" v-model="utemp.password" maxlength="30"
                              placeholder="请输入密码" show-word-limit/>
                </el-form-item>
                <el-form-item label="微信">
                    <el-input id="awechat" name="awechat" v-model="utemp.wechat" maxlength="30"
                              placeholder="请输入微信" show-word-limit/>
                </el-form-item>
                <el-form-item label="角色编号">
                    <el-input id="arole_id" name="arole_id" v-model="utemp.role_id" maxlength="30"
                              placeholder="请输入角色编号" show-word-limit/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="uaddVisible = false">取 消</el-button>
            <el-button type="primary" @click="usaveAdd()">确 定</el-button>
          </span>
        </el-dialog>

    </div>
    <!-- 数据栏 -->
    <div class="c-panel" style="width: 23%;float: left">
        <div class="c-title">角色列表</div>
        <el-table class="data-table" :data="allrolelist">
            <el-table-column label="角色编号" prop="role_id" sortable></el-table-column>
            <el-table-column label="角色名称" prop="role" sortable></el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" class="c-button" icon="el-icon-edit" @click="handleEdit(scope.row)">修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑 -->
        <el-dialog title="角色编辑" :visible.sync="editVisible" width="30%">
            <el-form name="form" id="form" ref="form" :model="form" label-width="100px">
                <el-form-item label="角色编号">
                    {{form.role_id}}
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input id="role" name="role" v-model="form.role" maxlength="30"
                              show-word-limit/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEdit()">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 添加 -->
        <el-dialog title="角色添加" :visible.sync="addVisible" width="30%">
            <el-form name="temp" id="temp" ref="temp" :model="temp" label-width="100px">
                <el-form-item label="角色名称">
                    <el-input id="trole" name="role" v-model="temp.role" maxlength="30"
                              placeholder="请输入角色名称" show-word-limit/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAdd()">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</div>
<script>
    var app = new Vue({
        el: '#vue-box',
        data: {
            allrolelist: [
                {
                    role_id: 1,
                    role: "超级管理员",
                }
            ],
            alluserlist: [
                {
                    user_id: 1,
                    job_id: 1,
                    username: 'xxx',
                    password: 'xxx',
                    wechat: 'xxx',
                    role_id: 1,
                    state: 1,
                    ename: 'xxx',
                    role: 'xxx'
                }
            ],
            editVisible: false,
            addVisible: false,
            ueditVisible: false,
            uaddVisible: false,
            form: {
                role_id: 1,
                role: "超级管理员",
            },
            temp: {
                role: undefined
            },
            uform: {
                user_id: undefined,
                job_id: undefined,
                username: undefined,
                password: undefined,
                wechat: undefined,
                role_id: undefined,
                state: undefined,
                ename: undefined,
                role: undefined
            },
            utemp: {
                job_id: 1,
                username: 1,
                password: 1,
                wechat: 1,
                role_id: 1
            }
        },

        created: function () {
            this.getData();
            this.getuData();
        },

        methods: {
            handleEdit: function (row) {
                this.form = {
                    role_id: row.role_id,
                    role: row.role
                }
                this.editVisible = true
            },

            handleAdd: function (row) {
                this.addVisible = true
            },
            uhandleEdit: function (row) {
                this.uform = {
                    user_id:row.user_id,
                    job_id: row.job_id,
                    username: row.username,
                    password: row.password,
                    wechat: row.wechat,
                    role_id: row.role_id,
                    state: row.state,
                    ename: row.ename,
                    role: row.role
                }
                this.ueditVisible = true
            },

            uhandleAdd: function (row) {
                this.uaddVisible = true
            },

            // 保存编辑，更新信息
            saveEdit: function () {
                var that = this
                if (that.form.role == "") {
                    layer.tips('请输入角色名称', $("#role"));
                    $("#role").focus();
                    return false;
                } else {
                    $.ajax({
                        url: "http://localhost:9900/Updaterole",
                        type: "post",
                        data: {
                            role: that.form.role,
                            role_id: that.form.role_id
                        },
                        success: function () {
                            layer.alert('修改成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                                , anim: 4
                            });

                            that.getData()
                        }
                    })
                    that.editVisible = false
                }
            },
            // 保存编辑，更新信息
            usaveEdit: function () {
                var that = this
                if (that.uform.username == "") {
                    layer.tips('请输入用户名', $("#eusername"));
                    $("#eusername").focus();
                    return false;
                }else if (that.uform.password == "") {
                    layer.tips('请输入密码', $("#epassword"));
                    $("#epassword").focus();
                    return false;
                }else if (that.uform.wechat == "") {
                    layer.tips('请输入微信', $("#ewechat"));
                    $("#ewechat").focus();
                    return false;
                }else if (that.uform.role_id == "") {
                    layer.tips('请输入角色编号', $("#erole_id"));
                    $("#erole_id").focus();
                    return false;
                }else if (that.uform.state == "") {
                    layer.tips('请输入状态', $("#estate"));
                    $("#estate").focus();
                    return false;
                } else {
                    $.ajax({
                        url: "http://localhost:9900/Updateuser",
                        type: "post",
                        data: {
                            user_id: that.uform.user_id,
                            username: that.uform.username,
                            password: that.uform.password,
                            wechat: that.uform.wechat,
                            role_id: that.uform.role_id,
                            state: that.uform.state
                        },
                        success: function () {
                            layer.alert('修改成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                                , anim: 4
                            });

                            that.getuData()
                        }
                    })
                    that.ueditVisible = false
                }
            },


            //添加
            saveAdd: function () {
                var that = this
                if (that.temp.role == "") {
                    layer.tips('请输入角色名称', $("#trole"));
                    $("#trole").focus();
                    return false;
                } else {
                    $.ajax({
                        url: "http://localhost:9900/Insertrole",
                        type: "post",
                        data: {
                            role: that.temp.role,
                        },
                        success: function () {
                            layer.alert('添加成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                                , anim: 4
                            });
                            that.getData()
                        }
                    })
                    that.addVisible = false
                }
            },

            //添加
            usaveAdd: function () {
                var that = this
                if (that.utemp.job_id == "") {
                    layer.tips('请输入员工编号', $("#ajob_id"));
                    $("#ajob_id").focus();
                    return false;
                }else if (that.utemp.username == "") {
                    layer.tips('请输入用户名', $("#ausername"));
                    $("#ausername").focus();
                    return false;
                }else if (that.utemp.password == "") {
                    layer.tips('请输入密码', $("#apassword"));
                    $("aepassword").focus();
                    return false;
                }else if (that.utemp.wechat == "") {
                    layer.tips('请输入微信', $("#awechat"));
                    $("#awechat").focus();
                    return false;
                }else if (that.utemp.role_id == "") {
                    layer.tips('请输入角色编号', $("#arole_id"));
                    $("#arole_id").focus();
                    return false;
                }else {
                    $.ajax({
                        url: "http://localhost:9900/Insertuser",
                        type: "post",
                        data: {
                            job_id: that.utemp.job_id,
                            username: that.utemp.username,
                            password: that.utemp.password,
                            wechat: that.utemp.wechat,
                            role_id: that.utemp.role_id
                        },
                        success: function () {
                            layer.alert('添加成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                                , anim: 4
                            });
                            that.getuData()
                        }
                    })
                    that.uaddVisible = false
                }
            },


            //刷新数据
            getData: function () {
                var that = this
                axios.post('http://localhost:9900/Findallrole').then(function (res) {

                    //把从json获取的数据赋值给数组
                    var data = res.data.allrolelist
                    that.allrolelist = data

                }).catch(function () {
                    console.log('失败')
                })
            },
            //刷新数据
            getuData: function () {
                var that = this
                axios.post('http://localhost:9900/FindAllUser').then(function (res) {

                    //把从json获取的数据赋值给数组
                    var data = res.data.alluserlist
                    that.alluserlist = data
                    console.log('2313232' + that.alluserlist)
                }).catch(function () {
                    console.log('失败')
                })
            },

        }
    })
</script>

</body>
</html>
